<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input class="btn" type="button" name="" id="" value="按钮1" />
		<input class="btn" type="button" name="" id="" value="按钮2" />
		<input type="button" name="" id="" value="按钮3" />
		<input type="button" name="" id="" value="按钮4" />
	</body>
	<script type="text/javascript">
		//需求：只保留class为btn的按钮(不使用getElementsByClassName)
		//思路：数组中，有filter()方法，可用来过滤数组内的元素
		let arr = [11,22,33,55]
		let res = arr.filter(data => {
			return data > 30
		})
		console.log(res)// [33,55]
		
		//问题，但是dom对象没有提供filter方法来过滤。
		let btns = document.querySelectorAll("input")
		console.log(btns)
		console.log(btns.filter)//undefined
		//解决方式：借用数组的filter方法
		//【关键】call可以改变函数执行的对象。
		//call(将要改变的对象，传入函数的参数)
		// arr.filter.call(替代arr的对象, filter所需要的参数 )
		btns = arr.filter.call(btns, data=> {
			return data.className === "btn"
		})
		console.log(btns)
		
		//apply 和 call 的第一个参数，传入将要改变的目标对象
		// 唯一的区别是：call直接写参数进去,而apply是把所有参数的数组放进去
		//本例子中，参数只有一个，就是回调函数，用apply的话也需要放进数组。
		btns = arr.filter.apply(btns, [
			data=> {
				return data.className === "btn"
			}
		])
		console.log(btns)
	</script>
</html>
